
<template>
  <div class="body">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" @click="getBack" alt class="img_zuo" />
        <div>js版高德地图</div>
      </div>
    </header>

    <div class="contant">
      <div id="ditu"></div>
    </div>

  </div>
</template>
<script>
  /**
   * js版高德地图使用方法
   * 1.注册高德地图key
   * 2.在index.html页面引入高德地图的js http://webapi.amap.com/maps?v=1.4.6&key=注册的key
   * 3.本页修改代码完成功能
   */
  import Vue from 'vue';
  import { Dialog } from 'vant';
  export default {
    name: "gaode_map_js",
    data() {
      return {
        map:null,
        markers:[]
      };
    },
    methods: {
        getBack () {//返回
          this.$router.push("/index");
        },
        createMap(){
          var _this = this;
          _this.map = new AMap.Map('ditu',{
          	zoomEnable: true, //地图是否可缩放，默认值为true
          });
          // 传入经纬度，设置地图中心点
          //渝中区106.57,29.55
          //杨家坪106.512339,29.505386
          var position = new AMap.LngLat(_this.$global_msg.centerJwd.jd,_this.$global_msg.centerJwd.wd);  // 标准写法
          _this.map.setCenter(position);
          // 设置地图级别，级别为数字。
          // PC上，参数zoom可设范围：[3,18]；
          // 移动端：参数zoom可设范围：[3,19]
          _this.map.setZoom(19);

          //地图点击事件
          _this.map.on('click', function(ev) {
          	// 触发事件的对象
            var target = ev.target;
            // 触发事件的地理坐标，AMap.LngLat 类型
            var lnglat = ev.lnglat;
            // 触发事件的像素坐标，AMap.Pixel 类型
            var pixel = ev.pixel;
            // 触发事件类型
            var type = ev.type;

            //清楚所有标点
            // for(var n=0;n<_this.markers.length;n++){
            //   _this.map.remove(_this.markers[n]);
            // }
            //创建标点
            _this.biaodian(lnglat);
          });
        },
        biaodian(lnglat){
          var _this = this;
          var content = '';
          content+='<div class="biaodian">';
          	content+='<img class="biaodian-icon" src="'+require('../../assets/images/dw_1.png')+'"/>';
            content+='<div class="biaodian-text">标点</div>';
          content+='</div>';
          // 创建一个 Marker 实例：
          var marker = new AMap.Marker({
          	position: lnglat,// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          	//title: '标点',
          	content: content
          });
          // 设置点标记的动画效果，此处为弹跳效果
          //marker.setAnimation('AMAP_ANIMATION_BOUNCE');
          // 将创建的点标记添加到已有的地图实例：
          //marker.dataObj = obj;
          marker.on('click',function(o){
          	console.log(o)
            //_this.map.remove(o.target);
            _this.look(o.target._amap_id);

          	/*var content = '';
          	content+='<div class="biaodian">';
          		content+='<img class="biaodian-icon" src="img/dwpc_22.gif"/>';
          		content+='<div class="biaodian-text">gggg</div>';
          	content+='</div>';
          	o.target.setContent(content);*/
          });
          _this.map.add(marker);
          _this.markers.push(marker);
          //_this.map.setFitView();
        },
        look(obj){
          console.log(obj)
        }
    },
    mounted() {
		var _this = this;
		var AMap_timer = setInterval(function(){
			if(AMap){
				clearInterval(AMap_timer);
				_this.createMap();
			}
		},100);
    },
    created() {

    }
  };
</script>
<style scoped>
  .contant {
    border: 1px solid white;
    flex: 1;
  }

  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    width: 100%;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  .body{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
  }

  #ditu{
    width: 100%;
    height: 100%;
  }
</style>
